<template>
<div class="photoinfo-container">
  <h3>{{dataphotos.title}}</h3>
  <p class="subtitle"><span>发表时间：{{dataphotos.add_time | fordata}}</span> <span>点击：{{dataphotos.click}}次</span></p>
 <hr>
 <div class="thumbs">
     <img :src="item.src" class="preview-img"  v-for="(item,i) in imgdata" :key="i">
     </div>
     <div class="content" v-html="dataphotos.content"></div>

     
    <!-- 发表评论组件 -->
    <comment :id="id"></comment>
 </div>
</template>
<script>
import comment from '../comment/comment.vue'
export default {
  data() {
    return {
        imgdata:[],
        dataphotos:[]
    };
  },
  created() {
      this.getinfo(this.id)
      this.getphotodata(this.id)
    console.log(this.id);
  },
  methods: {
      async getinfo(id){
          const { data } = await this.$http.get('/api/getthumimages/'+id)
          if(data.status === 0){
              //console.log(data.message)
              this.imgdata = data.message;
          }
      },
       async getphotodata(id) {
      const { data } = await this.$http.get("/api/getimageInfo/" + id);
      if (data.status === 0) {
        console.log(data.message[0]);
        this.dataphotos = data.message[0];
      }
    }
  },
  components:{
      comment
  },
  props: ["id"]
};
</script>
<style lang="scss">
.photoinfo-container{
    padding: 5px;
    h3{
    color: #26a2ff;
    font-size: 15px;
    text-align: center;
    margin: 15px 0;
}
.subtitle {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}
.thumbs img{
    margin: 10px;
    box-shadow: 0 0 8px #999;
    height: 100px;
}
.content{
    font-size: 13px;
    line-height: 30px;
}
}
 
</style>

